/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-08 17:12:40
 * @LastEditTime: 2023-11-29 14:08:11
 */
/*
 * @Description:
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-08 16:25:09
 * @LastEditTime: 2023-09-15 11:37:33
 */
import './index.less'

const IndicatorPercent: React.FC<{
    title?: string,
    size?: 'large' | 'normal' | 'small',
    value: string,
    arrow?: false | true | 'withBar',
    style?: { [key: string]: any },
    valueStyle?: { [key: string]: any },
    titleStyle?: { [key: string]: any },
    className?: string
}> = ({ title, size = 'normal', value, arrow = false, valueStyle = {}, titleStyle = {}, style, className = '' }) => {

    const arrowWithBarClassSuffix = arrow === 'withBar' ? '-with-bar' : '';
    if (value?.endsWith("%")) {
        value = value.replace("%", "");
    }

    return (
        <div className={`indicator-percent indicator-percent--${size} ${className}`} style={style}>
            {
                title ? <span className='indicator-percent--name' style={titleStyle}>{title}</span> : null
            }
            {
                !value || value === '-' || Number(value) == 0
                    ? <span style={{ ...valueStyle, color: '#fff' }} className='indicator-percent--value'>-</span>
                    : (
                        arrow
                            ? <span
                                style={{ ...valueStyle }}
                                className={`indicator-percent--value ${value.indexOf('-') > -1 ? `percent-arrow--down${arrowWithBarClassSuffix}` : `percent-arrow--up${arrowWithBarClassSuffix}`}`}>{value.toString().replace('-', '')}%</span>
                            : <span
                                style={{ ...valueStyle }}
                                className={`indicator-percent--value ${value.indexOf('-') > -1 ? 'percent--minus' : 'percent--plus'}`}>{value.indexOf('-') > -1 ? value : '+' + value}%</span>
                    )
            }

        </div>
    )
}
export default IndicatorPercent